<template>
    <div>
        <h2>请选择你喜欢的</h2>
           <div>
            <input type="checkbox" value="科幻"  v-model="hobby"/>
            科幻
            <input type="checkbox" value="喜剧" v-model="hobby"/>
            喜剧
            <input type="checkbox" value="动漫" v-model="hobby"/>
            动漫
            <input type="checkbox" value="冒险" v-model="hobby"/>
            冒险
            <input type="checkbox" value="科技" v-model="hobby"/>
            科技
            <input type="checkbox" value="军事" v-model="hobby"/>
            军事
            <input type="checkbox" value="娱乐" v-model="hobby"/>
            娱乐
            <input type="checkbox" value="奇闻" v-model="hobby"/>
            奇闻
          </div>
          <ul>
             <li v-for="item in hobby" :key='item'>
                    {{item}}
             </li>
          </ul>
    </div>

</template>

<script>
export default {
   data(){
      return {
         hobby: []
      }
   }
}
</script>

<style>

</style>